<template>
  <div class="virtualCard">
    <van-nav-bar
        :title="$t('repayment_virtual_card')"
        left-arrow
        @click-left="$router.go(-1)"
    />
    <div class="wrapper">
      <div class="form">
        <div class="form_item">
          <div class="label">{{ $t('bank_card') }}</div>
          <div class="card_box">
            <div class="text">{{cardPayInfo.accNo}}</div>
          </div>
        </div>
        <div class="form_item">
          <div class="label">{{ $t('bank_account_name') }}</div>
          <div class="content">
            <div class="input">{{ cardPayInfo.accName }}</div>
          </div>
        </div>
        <div class="form_item">
          <div class="label">{{ $t('bank_name') }}</div>
          <div class="content">
            <div class="input">{{ cardPayInfo.bankName }}</div>
          </div>
        </div>
        <div class="form_item">
          <div class="label">{{ $t('bank_branch_name') }}</div>
          <div class="content">
            <div class="input">{{ cardPayInfo.bankBranch }}</div>
          </div>
        </div>
        <div class="form_item">
          <div class="label">{{ $t('amount_payment') }}</div>
          <div class="content">
            <div class="input">{{ formatterMoney(cardPayInfo.payAmount) }}</div>
          </div>
        </div>
        <div class="form_item">
          <div class="label" style="color: #FF0000">{{ $t('warm_hint') }} :</div>
          <div class="tips_text">
            {{ tipsText }}
          </div>
        </div>
      </div>
      <div class="confirm">
        <button @click="cancelVirtualCard">{{ $t('cancel') }}</button>
      </div>
    </div>
  </div>
</template>


<script>
import {fetchVirtualCard, fetchBankRemark,cancelVirtual} from '@/api/order'
import {ref} from "vue";
import router from "@/router";
import {useStore} from "vuex";
import {formatMoney} from "@/utils/tool";

export default {
  setup() {
    const cardPayInfo = ref({})
    const store = useStore()
    const tipsText = ref('')
    const isRegister = ref(false)
    const {loanRecordId} = router.currentRoute.value.query
    const fetchCardPay = async () => {
      const res = await fetchVirtualCard({loanRecordId})
      if (res.code === 1 && res.data) {
        cardPayInfo.value = res.data
      }
      // 清除loading
      store.dispatch('changeLoading', false)
    }
    const fetchRemark = async () => {
      const res = await fetchBankRemark({type: 8000})
      if (res.code === 1) {
        tipsText.value = res.data.msg
      }
    }
    const cancelVirtualCard = async () => {
      const res = await cancelVirtual({id: cardPayInfo.value.id})
       if (res.code === 1) {
        router.push({
          path:'/repayment',
          query:{
            loanRecordId:loanRecordId
          }
        })
      }
    }
    // 格式化金额
    const formatterMoney = (value) => {
      if (value) {
        return formatMoney(value, 0, "", '.')
      } else {
        return value
      }
    }
    fetchRemark()
    fetchCardPay()
    return {
      cardPayInfo,
      tipsText,
      isRegister,
      cancelVirtualCard,
      formatterMoney
    }
  }
}
</script>

<style scoped lang="less">
.virtualCard {
  ::v-deep .van-nav-bar {
    z-index: 1999;
    background: linear-gradient(90deg, #FF5252, #FF8244) !important;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: #333333 !important;
  }

  ::v-deep .van-switch {
    height: 26px !important;

    .van-switch__node {
      height: 26px !important;
    }
  }

  .wrapper {
    box-sizing: border-box;
    padding: 10px;
  }

  .form {
    width: 100%;

    .form_item {
      margin-bottom: 15px;
      text-align: center;

      .label {
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 10px;
        text-align: left;
      }

      .card_box {
        height: 110px;
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        border-radius: 10px;
        background: linear-gradient(-45deg, #6C9CEB, #6C9CEB, #50BAB1);

        .text {
          color: #FFFFFF;
          text-align: left;
          margin-top: 50px;
          font-size: 26px;
        }
      }

      .content {
        width: 100%;
        height: 40px;
        background-color: #FFFFFF;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 0 15px;
        text-align: left;
        line-height: 40px;
        .input {
          border: 0;
          background-color: #FFFFFF;
          width: 90%;
          font-size: 13px;
        }
      }

      .tips_text {
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        word-wrap: break-word;
        font-size: 11px;
        color: #4A4A4A;
      }
    }
  }

  .confirm {
    margin-top: 20px;
    text-align: center;

    button {
      width: 80%;
      padding: 10px 0;
      color: #ffffff;
      border: none;
      font-size: 16px;
      background: linear-gradient(-45deg, #FF5252, #FF8C3C);
      box-shadow: 0px 4px 10px 0px rgba(255, 92, 78, 0.52);
      border-radius: 29px;
      margin-bottom: 15px;
    }

  }
}
</style>
